<template>
  <div>
    <!-- 登陆页面中输入的部分 -->
    <div class="login-input" v-if="index == 0">

      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
        <!-- 手机号 -->
        <el-form-item class="login-input-phone border-bottom" prop="phone">
          <el-input
            v-model="loginForm.phone"
            prefix-icon="iconfont iconshouji "
          ></el-input>
        </el-form-item>

        <!-- 密码 -->
        <el-form-item
          class="login-input-password border-bottom"
          prop="password"
        >
        <!-- 给输入框加上 type="password" 则不会明文显示输入的密码-->
          <el-input
            type="password"
            v-model="loginForm.password"
            prefix-icon="iconfont  iconiconset0114"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <!-- 登陆按钮 -->
          <el-button type="danger" class="btn" @click="login">登录</el-button>
        </el-form-item>

        <el-form-item>
          <!-- 忘记密码按钮 -->
          <span class="forgetpas" @click="forgetpas">忘记密码</span>
        </el-form-item>

      </el-form>
    </div>

    <!-- 注册页面的输入部分 -->
    <div class="register-input" v-else>
      <el-form ref="registerFormRef" :model="registerForm" :rules="registerFormRules">

        <!-- 手机号 -->
        <el-form-item class="register-input-phone border-bottom" prop="phone" >
          <el-input v-model="registerForm.phone" prefix-icon="iconfont iconshouji "></el-input>
        </el-form-item>

        <!-- 验证码 -->
        <el-form-item class="register-input-verification border-bottom" prop="smsCode" >
          <el-input v-model="registerForm.smsCode" prefix-icon="iconfont iconrenzhengdunpaianquanbaozhangzhibao-xianxing "> </el-input>
          <span @click="getCode" v-show="show">获取验证码</span>
          <span v-show="!show">剩余{{count}}s</span>
        </el-form-item>

        <!-- 密码 -->
        <el-form-item class="register-input-password border-bottom" prop="password">
          <el-input type="password" v-model="registerForm.password" prefix-icon="iconfont  iconiconset0114"></el-input>
        </el-form-item>

         <!-- 推荐码 -->
        <el-form-item class="register-input-recommend border-bottom" prop="username">
          <el-input type="password" v-model="registerForm.username" prefix-icon="iconfont  iconren"></el-input>
        </el-form-item>

         <!-- 注册按钮 -->
        <el-form-item>
          <el-button type="danger" class="btn" @click="register">注册</el-button>
        </el-form-item>

        <el-form-item>
          <span class="protocol">点击注册即表示您已经同意用户协议</span>
        </el-form-item>
      </el-form>
  </div>
  </div>
</template>

<script>
/* 发送请求获得数据 */
import { getLoginData ,getRegisterData,getSmsCode} from "network/login";

export default {
  name: "InputForm",

  props: {
    index:Number
  },

  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        // console.log(reg.test(value));
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };

    return {
      //发送验证码是否显示剩余事件
      show: true,
      
      count: 60,

      timer: null,
      //状态码
      code: "",

      //获取的接口数据
      res: {},

      //这里是登陆表单的数据绑定对象
      loginForm: {
        // phone: "15254030529",
        // password: "666666",
        phone: "",
        password: "",
      },

      //这里是注册表单的数据绑定对象
      registerForm: {
        // phone: "15254030529",
        // smsCode: '111',
        // password: "666666",
        // username: '222'
        phone: "",
        smsCode: '',
        password: "",
        username: ''
      },

      //这是注册表单规则验证对象
      registerFormRules: {
        /* 手机号验证规则 */
        phone: [{ validator: checkPhone, trigger: "blur" }],
        /* 推荐码验证规则 */
        smsCode:[ 
          { required: true, message: "请输入验证码", trigger: "blur" },
          {
           pattern:/^\d{4}$/, message: '你的验证码格式不正确' 
          }],
          /* 密码验证规则 */
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "blur",
          },
        ],
        /* 推荐码验证规则 */
        username: [
          { required: true, message: "请输入推荐码", trigger: "blur" },
          {
           pattern:/^\d{4}$/, message: '你的推荐码格式不正确' 
          }],
      },

      //这是登录表单规则验证对象
      loginFormRules: {
        phone: [{ validator: checkPhone, trigger: "blur" }],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    //点击登陆按钮进行一个登陆前的预验证（返回一个布尔值）
    login() {
      /* validate是elementUi中form表单的一个验证方法，需要获得this.$refs.loginFormRef获得实例对象之后调用，参数是布尔值 */
      this.$refs.loginFormRef.validate(async (vaid) => {
        if (!vaid) return;
       /*  携带用户填写的手机号及密码发送请求， */
        await getLoginData(this.loginForm.phone, this.loginForm.password).then(
          (res) => {
            this.code = res.code;
            console.log(res);
            this.res = res;
          }
        );
        if (this.code != 200) {
          this.$toast.show("用户不存在或密码不正确！");
        } else {
          this.$toast.show("登陆成功");
          window.sessionStorage.setItem("token", this.res.result.id);
          this.$router.push("/home");
        }
      });
    },
    //点击注册按钮进行一个登陆前的预验证（返回一个布尔值）
    register () {
      this.$refs.registerFormRef.validate(async (vaid) => {
        if (!vaid) return;
        await getRegisterData (this.registerForm.phone,this.registerForm.smsCode,
        this.registerForm.password,this.registerForm.username).then(
          (res)=> {
            console.log(res)
            if(res.code === 200) {
              this.$router.push('/')
            }else if(res.code === 500) {
              this.$toast.show('用户已存在！')
            }
          }
        ) 
      })
    },
    //获取验证码
    getCode () {
      if(!this.timer){
         this.show = false;
         this.timer = setInterval(() => {
           if (this.count > 0 && this.count <= 60) {
            this.count--;
           }else {
             this.show = true;
             clearInterval(this.timer);  // 清除定时器
             this.timer = null;
             this.count = 60
           }
         },1000)
      }
      getSmsCode (this.registerForm.phone).then (res => {
        console.log(res)
      })
    },

    forgetpas () {
      this.$router.push('/forgetpas')
    }

  },
};
</script>

<style lang="less" scoped>
.login-input/deep/.el-input__inner {
  border: 0;
}
.register-input/deep/.el-input__inner {
  border: 0;
}
.login-input {
  margin-top: 0.47rem;
  .login-input-phone {
    margin: 0.4rem 0.255rem 0 0.255rem;
    padding-bottom: 0.075rem;
  }
  .login-input-password {
    margin: 0.465rem 0.255rem 0 0.255rem;
    padding-bottom: 0.075rem;
    font-size: 0.14rem;
  }
  .btn {
    width: 1.97rem;
    height: 0.525rem;
    font-size: 0.15rem;
    color: #ffffff;
    text-align: center;
    margin-top: 0.31rem;
    margin-left: 0.89rem;
    background: #d20a0a;
  }
  .forgetpas {
    margin-left: 1.6rem;
  }
}

.register-input {
  .register-input-phone {
    margin: 0.2rem 0.255rem 0 0.255rem;
    padding-bottom: 0.075rem;
  }
  .register-input-verification{
    padding: 0.3rem 1rem  0.075rem 0;
    margin-left: .25rem;
    margin-right: .255rem;
    span {
      float: right;
      text-align: center;
      margin-right: -1rem;
      font-size: .14rem;
      color: #D20A0A;
    }
  }
  .register-input-password {
    margin: 0.2rem 0.255rem 0 0.255rem;
    padding-bottom: 0.075rem;
    font-size: 0.14rem;
  }
  .register-input-recommend {
    margin: 0.2rem 0.255rem 0 0.255rem;
    padding-bottom: 0.075rem;
    font-size: 0.14rem;
  }
  .btn {
    width: 1.97rem;
    height: 0.525rem;
    font-size: 0.15rem;
    color: #ffffff;
    text-align: center;
    margin-top: 0.31rem;
    margin-left: 0.89rem;
    background: #d20a0a;
  }
  .protocol {
    margin-left: .76rem;
  }
}
</style>
